---
import SocialIcon from '@/components/SocialIcon.astro';
import Stack from '@/components/Stack/Stack.astro';
import Text from '@/components/Text/Text.astro';
import { SITE_TITLE } from '@/consts';
import { menu } from '@/site.config';
import { Icon } from 'astro-icon/components';
import { isLinkAbsolute } from '@/utils/string.utils';

const year = new Date().getFullYear();
const url = new URL(Astro.request.url);
---

<footer class="footer">
  <Stack axis="y" gap={4}>
    <Text variant="sm">
      <span>© {year}</span>
      <span>{SITE_TITLE}</span>
    </Text>
    <Text
      variant="xs"
      color="color-text-subdued"
      as="a"
      href="https://www.netlify.com"
      target="_blank">Deploys by Netlify</Text
    >
  </Stack>

  <nav class="nav">
    <div class="subnav">
      <Text variant="body" as="h2" color="color-text-subdued">Spec</Text>
      <ul class="u-list-reset">
        {
          menu.about.map((link) => (
            <li>
              <a
                aria-current={url.pathname === link.path ? 'page' : false}
                data-astro-prefetch
                class="link"
                href={link.path}
                aria-label={
                  isLinkAbsolute(link.path)
                    ? `Link opens in a new window (${link.path})`
                    : link.title
                }
                target={isLinkAbsolute(link.path) ? '_blank' : undefined}
              >
                {link.title}
                {isLinkAbsolute(link.path) ? (
                  <Icon name="external" aria-label="(new tab)" />
                ) : null}
              </a>
            </li>
          ))
        }
      </ul>
    </div>

    <div class="subnav">
      <Text variant="body" as="h2" color="color-text-subdued"
        >Community Group</Text
      >
      <ul class="u-list-reset">
        {
          menu.learn.map((link) => (
            <li>
              <a
                aria-current={url.pathname === link.path ? 'page' : false}
                data-astro-prefetch
                class="link"
                href={link.path}
                target={isLinkAbsolute(link.path) ? '_blank' : undefined}
              >
                <Fragment set:html={link.title} />
                {isLinkAbsolute(link.path) ? (
                  <Icon
                    name="external"
                    role="graphics-symbol img"
                    aria-label="(new tab)"
                  />
                ) : null}
              </a>
            </li>
          ))
        }
      </ul>
    </div>

    <div class="subnav">
      <Text variant="body" as="h2" color="color-text-subdued">Social</Text>
      <Stack axis="x" gap={0} as="ul" wrap class="u-list-reset">
        {
          menu.social.map((link) => (
            <li>
              <SocialIcon
                icon={link.icon}
                link={link.path}
                title={link.title}
              />
            </li>
          ))
        }
      </Stack>
    </div>
  </nav>
</footer>

<style lang="scss">
  .footer {
    display: flex;
    gap: var(--base-space-8);
    background-color: var(--color-bg);
    border-block-start: 1px solid var(--color-border);
    flex-direction: column;
    padding-block-end: var(--base-space-12);
    padding-block-start: var(--base-space-8);
    padding-inline: var(--page-padding-x);

    @media screen and (width > 950px) {
      flex-direction: row;
      justify-content: space-between;
    }

    .link {
      font-size: var(--font-size-sm);
      line-height: 2;
    }
  }

  .nav {
    --gap: var(--base-space-8);

    display: grid;
    gap: var(--gap);

    @media screen and (width > 600px) {
      --gap: var(--base-space-12);
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  .subnav {
    display: flex;
    flex-direction: column;
    gap: var(--base-space-4);
    width: max-content;
  }
</style>
